<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的世界</title>
<link rel="stylesheet" href="./web/css/element/index.css">
<link rel="icon" href="https://res.ldmnq.com/gw/assets/images/05/favicon.ico" type="image/svg+xml">
</head>
<body>

<div id="app">
	<el-row style="margin-top: 50px;display: flex;">
        <el-radio-group 
            style="width: 100%;text-align: center;"
            v-model="modeldialog.value" 
            border="true"
            @change="change_model"
            size="medium">
            <el-radio-button label="1">&nbsp;&nbsp;&nbsp;话术/关键词&nbsp;&nbsp;&nbsp;</el-radio-button>
            <el-radio-button label="-1">&nbsp;&nbsp;&nbsp;任务列表&nbsp;&nbsp;&nbsp;</el-radio-button>
        </el-radio-group>
    </el-row>
    <div class="wrapper" v-show="modeldialog.visible">
    	<template>
	    <el-row style="width: 80%;display: flex;margin: 0 auto;">
	    	<el-button type="success" size="small" plain @click="hsdialog.visible=true">添加话术</el-button>
	    	<el-button type="warning" size="small" plain @click="gjcdialog.visible=true">添加关键词</el-button>
	    </el-row>
	    <el-row style="width: 78%;margin: 0 auto;margin-top: 10px;">
	    	<el-card v-for="(mitem, index) in hslist" :key="index" >
		        <el-row type="flex" justify="space-between" >
			        <el-col :span="20" style="line-height: 36px;">
			            <el-tag>{{index}}</el-tag>
			        </el-col>
			        <el-col :span="4" style="text-align: right;">
			            <el-button type="primary" size="mini" @click="editArticle($event, mitem, index)">编辑</el-button>
			            <el-button type="danger" size="mini" @click="deleteArticle($event, mitem, index)">删除</el-button>
			        </el-col>
		        </el-row>
	      	</el-card>
	    </el-row>
	    <el-row style="width: 78%;margin: 0 auto;margin-top: 15px;">
		    <el-table
		      :data="gjclist"
		      border
		      style="width: 100%;height: 100%;">
		      <el-table-column
		        prop="value"
		        label="">
		      </el-table-column>
		      <el-table-column align="right" width="80">
		      	<template slot-scope="scope">
		        	<el-button
		          	size="mini"
		          	type="danger"
		          	@click="handleDelete(scope.$index, scope.row)">删除</el-button>
		      	</template>
		      </el-table-column>
		    </el-table>
		</el-row>
		</template>
    </div>
    <div class="wrapper" v-show="!modeldialog.visible">
    	<template>
    	<el-row style="width: 80%;margin: 0 auto;">
	    	<el-card v-for="(mitem, index) in callist" :key="index" >
		        <el-row type="flex" justify="space-between" >
			        <el-col :span="18" style="line-height: 36px;">
			        	<el-tag>{{mitem.create_time}}</el-tag>
			        	<el-tag>{{mitem.phone}}</el-tag>
			            <el-tag>{{mitem.name}}</el-tag>
			        </el-col>
			        <el-col :span="6" style="text-align: right;">
			        	<el-button type="primary" plain size="mini" @click="Call_Model_Status($event, mitem, index)">{{mitem.button_start}}</el-button>
			        	<el-button type="danger" plain size="mini" @click="Call_Model_Stop($event, mitem, index)">停止</el-button>
			            <el-button type="danger" size="mini" @click="Call_Model_Del($event, mitem, index)">删除</el-button>
			        </el-col>
		        </el-row>
	      	</el-card>
	    </el-row>
	    </template>
    </div>
    <template>
    	<el-dialog :visible.sync="gjcdialog.visible" width="50%" :close-on-click-modal="false">
	      <div>
	        <el-row style="margin-top: 8px;display: flex;">
	           	<el-tag type="info">关键词</el-tag>
	            <el-input size="small" v-model="gjcdialog.value"></el-input>
	        </el-row>
	        <el-row style="margin-top: 10px; text-align: center">
	          <el-button type="warning" plain size="small" style="margin-top: 20px;width: 100%" @click="creatgjc">添加</el-button>
	        </el-row>
	      </div>
	    </el-dialog>
    </template>
    <template>
	    <el-dialog :visible.sync="hsdialog.visible" width="70%" :close-on-click-modal="false">
	      <div>
	        <div style="display: flex; justify-content: center; align-items: center;"><h3>添加新的话术</h3></div>
	        <el-row style="text-align: center">
	          <el-row style="display: flex;margin-top: 15px;">
	            <el-button size="small" type="success" plain @click="hsdialog.value.push({value:''})" style="width: 50%" >添加话术</el-button>
	            <el-button size="small" type="danger" plain @click="hsdialog.value.pop()" style="width: 50%" >删除话术</el-button>
	          </el-row>
	        </el-row>
	        <el-row style="margin-top: 8px;">
	          <el-row style="display: flex;margin-top: 1px;" v-for="(mitem, index) in hsdialog.value">
	            <el-tag type="info">话术</el-tag>
	            <el-input size="small" v-model="mitem.value"></el-input>
	          </el-row>
	        </el-row>
	        <el-row style="margin-top: 30px; text-align: center">
	          <el-button type="warning" plain style="margin-top: 20px;width: 100%" @click="creaths">添加</el-button>
	        </el-row>
	      </div>
	      <h3 style="margin-top: 30px;"></h3>
	    </el-dialog>
  	</template>
  	<template>
  		<el-dialog :visible.sync="editdialog.visible" width="50%" :close-on-click-modal="false">
	      <div>
	        <el-row style="margin-top: 8px;">
	          <el-row style="display: flex;margin-top: 1px;" v-for="(mitem, index) in editdialog.value">
	            <el-tag type="info">话术</el-tag>
	            <el-input size="small" v-model="editdialog.value[index]"></el-input>
	          </el-row>
	        </el-row>
	        <el-row style="margin-top: 20px; text-align: center">
	          <el-button type="warning" plain size="small" style="margin-top: 20px;width: 100%" @click="savehs">保存</el-button>
	        </el-row>
	      </div>
	    </el-dialog>
  	</template>
</div>

</body>
<style>
.fixed-top {
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: #909399;
  border-radius: 3px;
}
.wrapper {
  width: 100%;
  margin-top: 15px;
  justify-content: center; /* 水平居中 */
}
.progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, 0.8); /* 半透明白色背景 */
}
</style>
<script src="./web/js/vue/vue.js"></script>
<script src="./web/js/element/index.js"></script>
<script src="./web/js/axios/qs.min.js"></script>
<script src="./web/js/axios/axios.min.js"></script>
<script>

	function getKeyByValue(object, value) {
  		return Object.keys(object).find(key => object[key] === value);
	}

	function Myround(num) {
	  return Math.round(num * 100) / 100;
	}
	
	function initWebSocket(vueobj, wsport) {
		var websock = new WebSocket("ws://" + window.location.hostname + ":" + wsport);
	  websock.onclose = function(event) {
	  	console.log("断开连接，30秒重连")
	  	setTimeout(function () {
				initWebSocket(vueobj, wsport);
			}, 30000);
	  };
	  websock.onopen = function(event) {console.log('连接成功')};
	  websock.onmessage = function(event) {websocketonmessage(event, vueobj)};
	}

	function websocketonmessage(event, vueobj) {
		let eve_data = JSON.parse(event.data)
		console.log(eve_data)
		if (eve_data.type === "hs_add") {
			if (vueobj.modeldialog.visible) {
				vueobj.$set(vueobj.hslist, eve_data.key, eve_data.value)
			}
		} else if (eve_data.type === "hs_set") {
			if (vueobj.modeldialog.visible) {
				vueobj.$set(vueobj.hslist, eve_data.key, eve_data.value)
			}
		} else if (eve_data.type === "hs_del") {
			if (vueobj.modeldialog.visible) {
				vueobj.$delete(vueobj.hslist, eve_data.key)
			}
		} else if (eve_data.type === "gjc_add") {
			if (vueobj.modeldialog.visible) {
				vueobj.gjclist.push({value:eve_data.value})
			}
		} else if (eve_data.type === "gjc_del") {
			if (vueobj.modeldialog.visible) {
				vueobj.gjclist.splice(eve_data.key, 1)
			}
		} else if (eve_data.type === "cal_add") {
			if (!vueobj.modeldialog.visible) {
				vueobj.$set(vueobj.callist, eve_data.key, eve_data.value)
			}
		} else if (eve_data.type === "cal_del") {
			if (!vueobj.modeldialog.visible) {
				vueobj.$delete(vueobj.callist, eve_data.key)
			}
		} else if (eve_data.type === "cal_start") {
			if (!vueobj.modeldialog.visible) {
				vueobj.$set(vueobj.callist[eve_data.key], "button_start", eve_data.value)
			}
		} else if (eve_data.type === "cal_stop") {
			if (!vueobj.modeldialog.visible) {
				vueobj.$set(vueobj.callist[eve_data.key], "button_start", eve_data.value)
			}
		} 
	}

	new Vue({
      el: '#app',
      data: {
      	supx: "",
      	hslist: { },
      	gjclist: [ ],
      	callist: { },
      	modeldialog: {value: "1", visible: true},
      	hsdialog: {visible: false, value: []},
      	gjcdialog: {visible: false, value: ""},
      	editdialog: {visible: false, value: [], id: ""},
      },
      created() {
      	initWebSocket(this, 2025)
      	this.get_huashu_guanjianci()
      },
      methods: {
      	change_model() {
      		if (this.modeldialog.value === "-1") {
      			this.modeldialog.visible = false
      			this.get_call_model()
      		}else{
      			this.modeldialog.visible = true
      			this.get_huashu_guanjianci()
      		}
      	},
      	get_huashu_guanjianci() {
      		this.hslist = {}
      		this.gjclist = []
      		let call1 = function(obj, ret) {
      			if (ret["code"]===1) {
      				let mydata = ret["msg"]
      				for (let key in mydata) {
					    if (mydata.hasOwnProperty(key)) {
					        obj.$set(obj.hslist, key, mydata[key])
					    }
					}
      			}
      		}
      		let call2 = function(obj, ret) {
      			if (ret["code"]===1) {
      				let mydata = ret["msg"]
      				for (let i=0; i<mydata.length;i++){
      					obj.gjclist.push({value:mydata[i]})
      				} 
      			}
      		}
      		this.api_get("/api/huashu", {model: "all"}, call1)
      		this.api_get("/api/guanjianci", {model: "all"}, call2)
      	},
      	get_call_model() {
      		let call = function(obj, ret) {
      			if (ret["code"]===1) {
      				let mydata = ret["msg"]
      				for (let key in mydata) {
					    if (mydata.hasOwnProperty(key)) {
					        obj.$set(obj.callist, key, mydata[key])
					    }
					}
      			}
      		}
      		this.api_get("/api/callmodel", {model:"get"}, call)
      	},
      	editArticle(eve, value, index) {
      		this.editdialog.visible = true
      		this.editdialog.value = value
      		this.editdialog.id = index
      	},
      	creaths() { // 添加话术
      		let dict = {model: "add", value: this.hsdialog.value}
      		let call = function(obj, ret) {
      			if (ret["code"]===1) {
      				//obj.$set(obj.hslist, ret["msg"], obj.hsdialog.value)
      				obj.pop_message('success','添加完成')
      				obj.hsdialog.value = []
      				obj.hsdialog.visible = false
      			}
      		}
      		this.api_post_json("/api/huashu", dict, call)
      	},
      	savehs() { // 修改话术
      		let dict = {model:"edit", id:this.editdialog.id, value:this.editdialog.value}
      		let call = function(obj, ret) {
      			if (ret["code"]===1) {
      				obj.editdialog.value = []
      				obj.editdialog.visible = false
      			}
      		}
      		this.api_post_json("/api/huashu", dict, call)
      	},
      	deleteArticle(eve, value, index) { // 删除话术
      		this.$confirm('确定要删除该[' + index + ']话术吗?', '提示', {
		        confirmButtonText: '确定',
		        cancelButtonText: '取消',
		        type: 'warning'
		    }).then(() => {
		    	let call = function(obj, ret) {
		    		if (ret["code"]===1) {
		    			//obj.$delete(obj.hslist, index)
		    			obj.pop_message('success','删除完成')
		    		}
		    	}
		    	this.api_get("/api/huashu", {model:"del", id:index}, call)
		    }).catch(() => {
		        this.pop_message('info','已取消删除')       
		    });
      	},
      	creatgjc() { // 添加关键词
      		let call = function(obj, ret) {
      			if (ret["code"]===1) {
      				//obj.gjclist.push({value:obj.gjcdialog.value})
      				obj.gjcdialog.value = ""
      				obj.pop_message('success','添加完成')
      				obj.gjcdialog.visible = false
      			}
      		}
      		this.api_get('/api/guanjianci', {model:"add", value: this.gjcdialog.value}, call)
      	},
      	handleDelete(index, value) { // 删除关键词
      		let call = function(obj, ret) {
      			if (ret["code"]===1) {
      				//obj.gjclist.splice(index, 1);
      				obj.pop_message('success','删除完成')
      			}
      		}
      		this.api_get("/api/guanjianci", {model:"del", index:index}, call)
      	},
      	Call_Model_Del(eve, value, index) { // 删除任务
      		let call = function(obj, ret) {
      			if (ret["code"]===1) {
      				//obj.gjclist.splice(index, 1);
      				obj.pop_message('success','删除完成')
      			}
      		}
      		this.api_get("/api/callmodel", {model:"del", id:index}, call)
      	},
      	Call_Model_Status(eve, value, index) {
      		let call = function(obj, ret) { }
      		this.api_get("/api/callmodel", {model:"set", key:"start", id:index}, call)
      	},
      	Call_Model_Stop(eve, value, index) {
      		let call = function(obj, ret) { }
      		this.api_get("/api/callmodel", {model:"set", key:"stop", id:index}, call)
      	},
      	api_get(url, dict, call) {
	        axios.get(url, { params: dict }).then(
	          	ret=>{
	            	call(this, ret.data)
	          	}
	        ).catch(error=>{
	          	console.log(error)
	          	this.pop_message('error', error)
	        })
	    },
	    api_post_json(url, dict, call){
	      axios.post(url, JSON.stringify(dict), {
	        headers: { "Content-Type": "application/json" }
	      })
	      .then(ret => {
	        call(this, ret.data);
	      })
	      .catch(error => {
	        console.log(error);
	        this.pop_message('error',error)
	      });
	    },
        pop_message(type, mesg) {
          	this.$message({
            	type: type,
            	message: mesg
          	})
        },
      }
});
</script>
</html>